<script setup>
import { ref } from 'vue';

/*TODO 正常情况下，应该是只有一个引用，并且鼠标获得焦点会进行切换底下的图片*/

// 定义一个响应式引用，用于存储主图片的路径
const mainPic = ref('/src/assets/img/bp1.jpg');

// 定义一个响应式引用，用于存储图片列表
const picList = ref([
  '/src/assets/img/bp1.jpg',
  '/src/assets/img/bp2.jpg',
  '/src/assets/img/bp3.jpg',
  '/src/assets/img/bp4.jpg',
  '/src/assets/img/bp5.jpg'
]);

/*汽车选项*/
// 定义一个响应式引用，用于存储产品名称
const productName = ref('第七代天籁 2020款 2.0T XV AD1智尊领航版');

// 定义一个响应式引用，用于存储品牌名称和品牌链接
const brand = ref('日产');
const brandUrl = ref('#');

// 定义一个响应式引用，用于存储价格
const price = ref('20.05');

// 定义一个响应式引用，用于存储外观选项
const colors = ref([
  { name: '天际红', url: '#', isCurrent: true },
  { name: '极光蓝', url: '#', isCurrent: false },
  { name: '珠光白', url: '#', isCurrent: false },
  { name: '月光银', url: '#', isCurrent: false },
  { name: '曜石黑', url: '#', isCurrent: false },
]);

// 定义一个响应式引用，用于存储车型选项
const types = ref([
  { name: '手动型', url: '#', isCurrent: true },
  { name: '自动型', url: '#', isCurrent: false },
  { name: '混合型', url: '#', isCurrent: false },
]);
// export default {
//   methods: {
//     goBack() {
//       console.log('go back');
//     }
//   }
// }

</script>

<template>

  <div id="wrapper" class="layout">
      <div class="curpostion">
        <el-page-header @back="goBack" content="详情页面">
        </el-page-header>
      </div>


    <!-- 汽车基本信息 -->
    <div id="prduct-base">
      <div class="product-pic">
        <img :src="mainPic" class="bpic">
        <ul>
          <li v-for="(pic, index) in picList" :key="index">
            <img :src="pic" />
          </li>
        </ul>
      </div>

      <div class="product-info">
        <h1>{{ productName }}</h1>
        <h3><a :href="brandUrl">{{ brand }}</a></h3>
        <p>
          <label>价格：</label>
          <strong>{{ price }}</strong>万
        </p>
        <div class="selectopt">
          <dl>
            <dt>选择外观：</dt>
            <dd v-for="(color, index) in colors" :key="index" :class="{ cur: color.isCurrent }">
              <a :href="color.url">{{ color.name }}</a>
            </dd>
          </dl>
          <dl>
            <dt>选择车型：</dt>
            <dd v-for="(type, index) in types" :key="index" :class="{ cur: type.isCurrent }">
              <a :href="type.url">{{ type.name }}</a>
            </dd>
          </dl>
        </div>

        <div class="cartopt">
          <form action="cart.html" method="">
            <div class="numopt">
              <input type="text" name="" id="" value="1" />
              <p><a href="#">+</a><a href="#">-</a></p>
            </div>
            <input type="submit" class="cartbt" name="" id="" value="加入购物车" />
            <input type="button" class="orderlookbt" name="" id="" value="预约看车" />
          </form>
        </div>

      </div>
    </div>
    <!-- 汽车介绍 -->
    <div id="product-intro">
      <h2 class="underline-title">汽车详情</h2>
      <div class="product-content">
        <img src="/src/assets/img/pintro.jpg">
      </div>
    </div>
  </div>
</template>

<style scoped>
.layout {
  width: 1200px;
  margin: 0 auto;
}

.product-list ul {
  overflow: hidden;
}

.product-list li {
  width: 282px;
  height: 380px;
  background-color: #FFFFFF;
  float: left;
  margin-left: 24px;
  text-align: center;
  color: #000000;
  margin-bottom: 24px;
}
.product-list li:hover{
  box-shadow: 0 0 16px #ccc;
}

.product-list li:nth-child(4n+1) {
  margin-left: 0;
}

.product-list li h3 {
  line-height: 32px;
  font-weight: normal;
}

.product-list li h3 a:hover,
.product-list li h4 a:hover {
  color: #f64747;
}

.product-list li h4 {
  color: #a4a4a4;
  line-height: 24px;
  font-weight: normal;
}

.product-list li h4 a {
  color: #a4a4a4;
}

/* .product-list li a:hover img {
	opacity: 0.8;
} */

.product-list p {
  color: #f64747;
  font-size: 16px;
  line-height: 24px;
  font-weight: bold;
}

#service {
  height: 160px;
}

.curpostion {
  margin-top: 40px;
  line-height: 20px;
}

.curpostion span {
  padding: 0 8px;
}

/* ---------------------------------------------------------- */
/* product */
#prduct-base{
  overflow: hidden;
  margin-top: 32px;
  margin-bottom: 32px;
}
.product-pic{
  float: left;
  width:588px;
}
.product-info{
  float: left;
  width:588px;
  margin-left: 24px;
  height: 462px;
}
.bpic{
  width:588px;
  height: 367px;
  border-radius: 8px;
  border:1px solid #CCCCCC;
  margin-bottom: 16px;
}
.product-pic li{
  float: left;
  margin-left: 8px;
  cursor: pointer;
}
.product-pic li:first-child{
  margin-left: 0;
}
.product-pic li img{
  width:109px;
  height: 67px;
  border-radius: 8px;
  border:1px solid #ccc;
}
.product-pic li:hover img{
  border:1px solid #f64747;
}
.product-info h1{
  font-size: 28px;
}
.product-info h3{
  margin: 24px 0;
}
.product-info h3 a{
  display:inline-block;
  padding:0 16px;
  line-height: 24px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
  background-color: #f5f5f5;
  color:#7a7a7a;
}
.product-info h3 a:hover{
  background-color: #f64747;
  color:#fff;
}
.product-info p{
  font-size: 16px;
}
.product-info p label{
  color:#7a7a7a;
}
.product-info p strong{
  color:#f64747;
  font-size: 32px;
  margin-right: 8px;
}
.selectopt{
  margin: 32px 0;
  border-top:1px solid #ebebeb;
  border-bottom:1px solid #ebebeb;
}
.product-info dl{
  overflow: hidden;
  margin: 16px 0;
}
.product-info dt{
  float: left;
  font-size: 16px;
  color:#7a7a7a;
  line-height: 24px;
}
.product-info dd{
  float: left;
  margin: 0 8px;
}
.product-info dd a{
  display: block;
  padding:0 16px;
  line-height: 24px;
  border-radius: 16px;
  font-size: 14px;
  border:1px solid #ebebeb;
}
.product-info .cur a{
  background-color: #f64747;
  color:#fff;
}
.cartopt{
  margin-left: 40px;
  height: 60px;
  margin-top: 110px;
}
.cartopt .numopt{
  float: left;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  overflow: hidden;

}
.cartopt .numopt input{
  float: left;
  text-align:center;
  line-height: 50px;
  width:48px;
  height: 50px;
  border: none;
}
.cartopt .numopt p{
  float: left;
  width:30px;
}
.cartopt .numopt a{
  display: block;
  background-color: #f5f5f5;
  text-align: center;
  line-height: 30px;
  border-bottom: 1px solid #ebebeb;

}
.cartopt .numopt a:last-child{
  border-bottom:none;
}
.cartopt .cartbt,.cartopt .orderlookbt{
  float: left;
  margin-left: 24px;
  height: 50px;
  border: none;
  width:180px;
  font-size: 20px;
  font-weight: bold;
  color:#fff;
  cursor: pointer;
  font-family: "microsoft yahei";
  border-radius: 8px;

}
.cartopt .cartbt{
  background-color: #f64747;
}
.cartopt .orderlookbt{
  background-color:#eb8a00;
}



</style>
